<template>
    <div style="width: 1000px;">
        <div style="  text-align: center;font-size: 24px;padding: 30px">用户信息</div>
        <el-form ref="form" :model="user" :rules="rules" label-width="120px">
            <el-form-item label="昵称" prop="nickName">
                <el-input v-model="user.nickName" style="width: 100%" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">

                <el-select v-model="user.sex" filterable allow-create default-first-option clearable
                           style="width: 100%">
                    <el-option :value="user.sex">
                        <span style="float: left">{{ user.sex }} </span>
                    </el-option>
                    <el-option value="男">
                        <span style="float: left"> 男 </span>
                    </el-option>
                    <el-option value="女">
                        <span style="float: left"> 女 </span>
                    </el-option>
                    <el-option value="保密">
                        <span style="float: left"> 保密 </span>
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="地址" prop="address" placeholder="请输入地址">

                <el-input type="textarea" v-model="user.address"></el-input>
            </el-form-item>
            <el-form-item label="号码" prop="phone">
                <el-input v-model="user.phone"  maxLength='11' minlength="11" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                          style="background-color: #ffffff" placeholder="请输入号码" ></el-input>
            </el-form-item>

            <el-form-item label="头像">
                <el-upload class="upload-demo" drag
                           action="http://114.115.144.177:9977/files/upload" :on-success="fileUploadSuccess">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <template #tip>
                        <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
                    </template>
                </el-upload>
                <div class="demo-image__preview" v-if="user.avatar">
                    <div style="width: 120px;height: 120px; margin-left: 30px">
                        <el-image
                                style="width: 100%; height: 100%;border-radius: 50%"
                                :src="user.avatar"
                                :preview-src-list="user.avatar">
                        </el-image>
                    </div>
                </div>
            </el-form-item>

            <el-form-item label=" " >
                <el-button type="primary" @click="save()">确 定</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "user",
        data() {
            return {
                user: {},
                rules: {
                    nickName: [{required: true, message: '请输入', trigger: 'blur'},],
                    address: [{required: true, message: '请输入', trigger: 'blur'},],
                    phone: [{required: true, message: '请输入', trigger: 'blur'},],
                    age: [{required: true, message: '请输入', trigger: 'blur'},],
                    avatar: [{required: true, message: '请选择', trigger: 'blur'},],

                },
            }
        },
        created() {
            this.getUser()
        },
        methods: {
            fileUploadSuccess(res) {
                this.user.avatar = res.data
            },
            getUser() {
                request.post("user/getUserById").then(res => {
                    this.user = res.data
                })
            },
            save() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.user.id) {
                            console.log(this.user)
                            request.put("/user", this.user).then(res => {
                                console.log(res)
                                if (res.code == "0") {
                                    localStorage.setItem("avatar",this.user.avatar)
                                    this.$message({
                                        type: "success",
                                        message: "更新成功！"
                                    })
                                    location.reload();
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: res.msg
                                    })
                                }
                            })
                        }
                    }
                })

            },

        }
    }
</script>

<style scoped>

</style>